<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>名伊医回访管理系统登录</title>
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			  tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.3"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: #4C17A9;
			}

			div.content {
				width: 100vw;
				height: 100vh;
				background: url('img/bg.png') center no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.form-box {
				width: 700px;
				height: 300px;
				margin: 0 auto;
				display: flex;
				box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
			}

			.left {
				width: 400px;
				color: #fff;
				padding: 40px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				background-image: linear-gradient(to bottom right, #3958F1, #4C17A9);
				font-size: 20px;
				font-family: '楷体', 'Microsoft YaHei', 'Arial Narrow', Arial, sans-serif;
			}

			.left hr {
				margin: 10px 0 15px;
			}

			.right {
				width: 300px;
				padding: 60px 30px;
				background: #fff;

			}

			.right .input-box {
				display: flex;
				margin-bottom: 25px;
			}

			.right .input-box .img-box {
				width: 50px;
				height: 40px;
				background: #ccc;
				line-height: 45px;
				text-align: center;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
			}

			.right .input-box .img-box img {
				width: 20px;
			}

			.right .input-box input {
				height: 38px;
				width: 168px;
				line-height: 38px;
				border: 1px solid #ccc;
				padding: 0 10px;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
			}

			.right button {
				width: 240px;
				height: 40px;
				line-height: 40px;
				margin-top: 30px;
				background: #4B1CAE;
				color: #fff;
				border: none;
				cursor: pointer;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="form-box">
				<div class="left">
					<p>
						欢迎来到
					</p>
					<hr />
					<p>名伊医回访管理系统</p>
				</div>
				<div class="right">
					<div class="input-box">
						<div class="img-box">
							<img src="./img/user.png" alt="no" />
						</div>
						<div>
							<input type="text" id="userName" placeholder="请输入用户名">
						</div>

					</div>
					<div class="input-box">
						<div class="img-box">
							<img src="./img/pwd.png" alt="no" />
						</div>
						<div class="">
							<input type="password" id="password" placeholder="请输入密码">
						</div>

					</div>
					<button id="btn" >登录</button>
				</div>
			</div>
		</div>
	</body>
	<script>
		$('#btn').click(function(e) {
			load();
			postBody("/admin/api/UserController/login", {
				login_name: $("#userName").val(),
				password: $("#password").val()
			}, function(res) {
				layer.closeAll();
				if (res.code == 0) {
					layer.alert(res.msg);
				} else {
					let token = res.data.token;
					localStorage.setItem("token", token);
					localStorage.setItem("user", JSON.stringify(res.data));
					localStorage.setItem("login_html",window.location.href);
					document.location.href = "/admin/html/main.html";
				}
			})

		});
	</script>
</html>